import Guide from '~/components/layout/guide'
import Snippet from '~/components/snippet'
import Caption from '~/components/text/caption'
import Link from '~/components/text/link'
import { Image } from '~/components/media'
import { InlineCode } from '~/components/text/code'
import DeploySection from '~/components/guides/deploy-section'

export const meta = {
  title: 'Deploy Foundation with ZEIT Now',
  description: 'Create a Foundation app and deploy it live with ZEIT Now.',
  published: '2019-12-02T12:00:00.860Z',
  authors: ['msweeneydev'],
  url: '/guides/deploying-foundation-with-zeit-now',
  example: 'foundation',
  demo: 'https://foundation.now-examples.now.sh',
  image:
    'https://og-image.now.sh/**Deploy%20Foundation%20Apps**%20%3C%2Fbr%3E%20with%20ZEIT%20Now.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fzeit-black-triangle.svg&images=https%3A%2F%2Fcdn.svgporn.com%2Flogos%2Ffoundation.svg&widths=300&widths=300&heights=300&heights=300',
  editUrl: 'pages/guides/deploying-foundation-with-zeit-now.mdx',
  name: 'Foundation',
  type: 'app',
  lastEdited: '2020-02-04T12:49:00.000Z'
}

[Foundation](https://foundation.zurb.com/) is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.

## Step 1: Set Up Your Foundation Project

Set up a Foundation app with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory, choosing the option **A web app** and providing a project name of `my-foundation-app`:

<Snippet dark text="npx foundation new && cd my-foundation-app" />
<Caption>Initializing a Foundation app with <Link href="https://www.npmjs.com/package/npx">npx</Link> and moving into the project directory.</Caption>

In the `./my-foundation-app/config.yml` file, under the `PATHS` object, change the output directory for the project to `public`:

```diff
PATHS:
-   "dist": "dist"
+   "dist": "public"
```

<Caption>
  Changing the output directory in the{' '}
  <InlineCode>/my-foundation-app/config.yml</InlineCode> file.
</Caption>

## Step 2: Deploying Your Foundation App with ZEIT Now

<DeploySection meta={meta} />

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
